<template>
    <div class="chat-info-list">
        <div
    class="scroll-view"
    :style="{ height: `${pageHeight}px`, marginTop: '54px' }"
    :click="resetInputStatus"
  >
    <div class="chat-content-container">
      <div
        v-for="(item, index) in chatItems"
        :key="index"
        class="chat-item-wrapper"
      >
        <chat-info-item
          :length="chatItems.length"
          :index="index"
          :item="item"
        />
      </div>
    </div>
  </div>
    </div>
</template>

<script lang="ts">
import type { PropType } from 'vue';
import type { MessageItem } from '../im-type/im-message-item';
import ChatInfoItem from './chat-info-item.vue';
export default {
    name: 'chat-info-content',
    components: {
        ChatInfoItem,
    },
    props: {
        chatItems: {
            type: Array as PropType<MessageItem[]>,
        },  
        pageHeight: {
            type: Number,
            default: 0,
        },
        resetInputStatus: {
            type: Function,
            default: () => {},
        },
    }
}
</script>

<style scoped>
.chat-info-list {
    width: 100%;
    height: 100%;
}
.scroll-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 4px 0;
  padding-bottom: 180px; /* 根据输入框高度调整 */
}
.chat-content-container {
  width: 90%;
  padding: 0 5%;
}
@media (max-width: 768px) {
  .chat-content-container {
    padding: 0 2%;
  }
}
.chat-item-wrapper {
  width: 100%;
  margin-bottom: 4px;
}
</style>

